<template>
  <TopBar></TopBar>
  <div class="layout-content">
    <div class="menu">
      <a-menu
        :style="{ width: '200px', height: '100%' }"
        show-collapse-button
        breakpoint="xl"
        :selected-keys="state.menu.selectedKeys"
        :open-keys="state.menu.openKeys"
        @menuItemClick="onMenuItemClick"
        @subMenuClick="onSubMenuClick"
      >
        <a-sub-menu key="0">
          <template #icon><icon-apps></icon-apps></template>
          <template #title>博客管理</template>
          <a-menu-item key="BackendBlogs">文章列表</a-menu-item>
          <a-menu-item key="EditBlogs">编辑文章</a-menu-item>
          <!-- <a-menu-item key="0_2">Menu 3</a-menu-item>
        <a-menu-item key="0_3">Menu 4</a-menu-item> -->
        </a-sub-menu>
        <a-sub-menu key="1">
          <template #icon><icon-bug></icon-bug></template>
          <template #title>评论管理</template>
          <a-menu-item key="CommentList">评论列表</a-menu-item>
          <!-- <a-menu-item key="1_1">Menu 2</a-menu-item>
        <a-menu-item key="1_2">Menu 3</a-menu-item> -->
        </a-sub-menu>
      </a-menu>
    </div>
    <div class="compenents">
      <router-view></router-view>
    </div>
    <!-- 滚动条用法，配合:deep()调整第三方样式 -->
    <!-- <a-scrollbar class="compenents" type="track" style="height:200px;overflow: auto;">
            <router-view></router-view>
        </a-scrollbar> -->
  </div>
</template>

<script setup>
import TopBar from '../../components/TopBar.vue'
// import { Message } from '@arco-design/web-vue';
import { useRouter } from 'vue-router'
import { state } from '../../stores/app'

const router = useRouter()
// const onCollapse= (val, type) => {
//         const content = type === 'responsive' ? '触发响应式收缩' : '点击触发收缩';
//         Message.info({
//           content,
//           duration: 2000,
//         });
//       }
// 点击菜单选项时，会把key传入,注意key的写法
// 错误代码，key导致的
// const onMenuClick = (key) =>{
//     router.push({name:'key'})
// }
const onMenuItemClick = (key) => {
  // console.log(key)
  state.value.menu.selectedKeys = [key]
  router.push({ name: key })
}
const onSubMenuClick = (key) => {
  // console.log(key)
  state.value.menu.openKeys = [key]
  // router.push({name: key})
}
</script>

<style lang="css" scoped>
.layout-content {
  display: flex;
  width: 100%;
  /* calc可理解为计算器 */
  height: calc(100vh - 45px);
}
.menu {
  border-right: 1px solid rgb(229, 230, 235);
}
.compenents {
  width: 100vw;
}

/* 修改第三方组件样式， */
/* :deep(.arco-scrollbar){
  width: 100%;
} */
</style>
